import React, { Component } from 'react'
import { Layout, Menu } from 'antd';
import { Link, Redirect, Route, RouteComponentProps, Switch, withRouter } from 'react-router-dom';
import AddArticle from './subviews/AddArticle';
import EditArticle from './subviews/EditArticle/EditArticle';
import EditArticleList from './subviews/EditArticle/EditArticleList';
const { SubMenu } = Menu;
const { Content, Sider } = Layout;

interface IProps extends RouteComponentProps {

}
class ArticleManiView extends Component<IProps> {

    render() {
        return (
            <Layout className="site-layout-background">
                <Sider theme='light' className="site-layout-background" width={200}>
                    <Menu
                        mode="inline"
                        selectedKeys={[this.props.location.pathname]}
                        defaultOpenKeys={['article']}
                    >
                        <SubMenu key="article" title="文章管理">
                            <Menu.Item key="/mani/article/add"><Link to='/mani/article/add'>添加文章</Link></Menu.Item>
                            <Menu.Item key="/mani/article/edit"><Link to='/mani/article/edit'>编辑文章</Link></Menu.Item>
                        </SubMenu>
                    </Menu>
                </Sider>
                <Content style={{ padding: '0 24px', minHeight: 280 }}>
                    <Switch>
                        <Route path='/mani/article/add' component={AddArticle} />
                        <Route path='/mani/article/edit' exact component={EditArticleList} />
                        <Route path='/mani/article/edit/:articleID' component={EditArticle} />
                        <Redirect to='/mani/article/add' />
                    </Switch>
                </Content>
            </Layout>
        )
    }
}

export default withRouter(ArticleManiView);